<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
    <meta name="author" content="">

    <title>Hungry? Come Here!</title>

	<link href="../css/bootstrap.min.css" rel="stylesheet" >
	<link href="../css/style.css" rel="stylesheet" >
</head>
<body>
<link href="../css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">

<script type="text/javascript" src = "../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src = "../js/twitterWidget.js"></script>
<script type="text/javascript" src = "../js/jquery.bgswitcher.js"></script>
<script type="text/javascript" src = "../js/bgswitcher.jquery.js"></script>
<script type="text/javascript" src = "../js/searchResults.js"></script>
<script type="text/javascript" src = "../js/sort.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.3.custom.min.js"></script>

<div class = "navbar navbar-inverse navbar-static-top">
	<div class = "container">
		<a href="#" class = "navbar-brand" id = "page_title">Hungry? Come Here!</a>

		<div class = "collapse navbar-collapse navHeaderCollapse">
			<ul class = "nav navbar-nav navbar-right">
				<li class = "active"><a href="index.html">Home</a></li>
				<li class = "dropdown">
					<a class = "dropdown-toggle" data-toggle = "dropdown" href="#">Share<b class = "caret"></b></a>
					<ul class = "dropdown-menu">
						<li><a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a></li>
						<li><a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;">Facebook</a></li>
					</ul>
				</li>
				<li><a href="register.html">Register</a></li>
				<li id = "loginRep" class = "dropdown"><a href="#login" data-toggle = "modal">Log In</a></li>
			</ul>
		</div>
	</div>
</div>

<div class = "container">
	<div class = "jumbotron header">
		<p id="page-header">Welcome to <strong>Hungry? Come Here!</strong></p>
		<p></p>
	</div>
	<script type="text/javascript">
	$(".header").bgswitcher({
		images: ["../img/header/img_1_2.jpg","../img/header/img_2_2.jpg","../img/header/img_3_2.png","../img/header/img_4.jpg"],
		loop:true,
		shuffle:true,
		duration:1000
	});
	</script>
</div>

<div class = "container">
	<div class = "row">
		<div class = "col-md-9" id = "restIntroduction">
				<script type="text/javascript" src = "../js/homepageIntro.js"></script>
				<script type="text/javascript" src = "../js/placeOrder.js"></script>

		</div>

		<div class ="col-md-3" id = "sidebar">
			<div id = "searchPanel" class = "row">
				<form role="form">
				<div class = "form-group">
					<label>Restaurant Name:</label>
					<input type="text" class="form-control" id="searchName" placeholder="Restaurent">
				</div>
				<div class="form-group">
				    <label>Cuisines</label>
				    <select id = "searchCuisines" name = "cuisines" class = "form-control" value = "">
				    <option value = "">All Cuisines</option>
				    <option value = "Chinese">Chinese</option>
				    <option value = "Indian">Indian</option>
				    <option value = "Japanese">Japanese</option>
				    <option value = "Western">Western</option>
				    </select>
			  	</div>
			  	<div class = "form-group">
			  		<label>Average Consumption</label>
			  		<select id = "avgcom" name = "avgcom" class = "form-control" value = "0">
				    <option value = "0">All Prices</option>
				    <option value = "1">$0-$30</option>
				    <option value = "2">$30-$50</option>
				    <option value = "3">$50-$100</option>
				    <option value = "4">over $100</option>
				    </select>
			  	</div>
			  	<input type = "submit" value = "search" class = "submitSearch form-control" id = "searchBtn">
				</form>
			</div>

			<hr />

			<div id = "highlightPanel" class = "row">
				<div class = "navbar navbar-default row" id = "hightlightHeader">
					<div class = "container navbar-brand">
						<h4><strong>Today's Highlight</strong></h4>
					</div>
				</div>

				<div id = "highlights row">
					
				</div>
			</div>
		</div>
	</div>

	<div class = "modal fade" id = "login" role = "dialog">
		<div class = "modal-dialog" id = "loginModalIndex">
			<div class = "modal-content">
				<div class = "modal-header">
					<h4>User Log In</h4>
				</div>
				<div class = "modal-body" id = "login_modal">
					<form role = "form">
						<div class = "form-group">
							<label>Email:</label>
							<input type="text" class="form-control" id="logInEmail" placeholder="Enter email" name = "email">
						</div>
						<div class="form-group">
					    <label>Password</label>
					    <input type="password" class="form-control" id="logInPassword" placeholder="Password" name = "password">
				  		</div>
				  		
				  		<div>
				  		<button class = "btn btn-primary" id = "loginBtn">Log In</button>
				  		</div>
				  		<script type="text/javascript" src="../js/cookies.js"></script>
				  		<script type="text/javascript" src="../js/login.js"></script>
				  		<script type="text/javascript">
				  		$(function(){
				  			$("#loginBtn").click(function(event){
				  				loginFun(event);
				  			});
					  	});
				  		</script>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>